<template>
  <div class="repayment">
<div>

<el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="企业名">
    <el-input v-model="formInline.enterprisename" placeholder="企业名"></el-input>
  </el-form-item>
  <el-form-item label="社会信用代码">
    <el-input v-model="formInline.code" placeholder="****">
      
    </el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>
         <el-form-item>
   <el-button type="primary"  @click="exportExcelSelect">导出Excel</el-button>
  </el-form-item>
  
</el-form>

</div>
<div style="height:500px">
  <el-table
    :data="tableData"
    border
    style="width: 120%">
    <el-table-column
      prop="loid"
      label="序号"
      width="50">
      
    </el-table-column>
    <el-table-column
      prop="borrowingvarieties"
      label="借款品种"
      width="150">
     
    </el-table-column>
    <el-table-column
      prop="enterprisename"
      label="企业名称"
      width="250">
    
    </el-table-column>
    <el-table-column
      prop="code"
      label="社会信用代码"
      width="200">
    </el-table-column>
    <el-table-column
      prop="amountborrowed"
      label="借款金额"
      width="180">
    </el-table-column>
    <el-table-column
      prop="borrowedterm"
      label="借款期限"
      width="120">
    </el-table-column>
    <el-table-column
      prop="repaymentstatus"
      label="还款状况"
      width="100">
    </el-table-column>
     <el-table-column
      prop="level"
      label="分类等级"
      width="109">
    </el-table-column>
     
    
  </el-table>
</div>

  <div class="block">
    
    <el-pagination 
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[3, 4, 5, 7]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalRecord">
    </el-pagination>
  </div>





  <el-dialog title="还款记录" :visible.sync="dialogTableVisible"  style="width: 100%;"  >
   <el-table
      :data="tableDatas"
      style="width: 100%">
      <el-table-column
        prop="regid"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="repaymentdate"
        label="还款日期"
         value-format="yyyy-MM-dd"
        width="120">
      </el-table-column>
      <el-table-column
        prop="actualrepaymentdate"
        label="实际还款日期"
        width="120">
      </el-table-column>
      <el-table-column
        prop="shouldtotal"
        label="应还总额"
         width="100">
      </el-table-column>
      <el-table-column
        prop="shouldprincipal"
        label="应还本金">
      </el-table-column>
      <el-table-column
        prop="overdue"
        label="应还利息">
      </el-table-column>
      <el-table-column
        prop="rxpectedpenaltyrate"
        label="逾期天数">
      </el-table-column>
      <el-table-column
        prop="repaymentstatus"
        label="逾期罚息">
      </el-table-column>
      <el-table-column
        prop="state"
        label="还款状态">
      </el-table-column>
      
    </el-table>

     <el-pagination 
      @size-change="handleSizeChanges"
      @current-change="handleCurrentChanges"
      :current-page="currentPage5"
      :page-sizes="[3, 4, 5, 7]"
      :page-size="pageSizes"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalRecords">
    </el-pagination>
</el-dialog>






 <el-dialog title="表格保存预览" width="70%" :visible.sync="selectWindow">
            <el-table :data="tableData" id="selectTable" height="380px">
               <el-table-column
      prop="loid"
      label="序号"
      width="50">
      
    </el-table-column>
    <el-table-column
      prop="borrowingvarieties"
      label="借款品种"
      width="150">
     
    </el-table-column>
    <el-table-column
      prop="enterprisename"
      label="企业名称"
      width="180">
    
    </el-table-column>
    <el-table-column
      prop="code"
      label="社会信用代码"
      width="200">
    </el-table-column>
    <el-table-column
      prop="amountborrowed"
      label="借款金额"
      width="120">
    </el-table-column>
    <el-table-column
      prop="borrowedterm"
      label="借款期限"
      width="120">
    </el-table-column>
    <el-table-column
      prop="repaymentstatus"
      label="还款状况"
      width="100">
    </el-table-column>
     <el-table-column
      prop="level"
      label="分类等级"
      width="100">
    </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="exportExcel">确定保存</el-button>
            </div>
        </el-dialog>


  </div>
</template>

<script>
    import htmlToExcel from '@/view/htmlToExcel.js'
export default {
  name: "ExcelPage",
  data () {
    return {
      selectData:[],
       selectWindow:false,
      sizeForm: {
        
          date1: '',
          date2: '',
          age:''
        
        },
        rules: {   
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ]
        },
     
      outerVisible: false,
        innerVisible: false,
      pageSize:7,
      pageSizes:7,
      dialogTableVisible: false,
      totalRecord:this.totalRecord,
      totalRecords:this.totalRecords,
       currentPage4: 1,
       currentPage5: 1,
     tableData: [],
     tableDatas:[],
      formInline: {
          user: '',
          region: ''
        }
    }
  },
  created(){
      this.init()
  },

  methods:{
     exportExcel() {
                htmlToExcel.getExcel('#selectTable','贷款五级分类的表格信息')
            },
             //显示预览弹窗
            exportExcelSelect(){
                if (this.tableData.length <0){
                    this.$message.error('请选择要导出的内容！');
                    return false;
                }
                this.selectWindow = true;
            },
            //选中数据
            handleSelectionChange(val) {
                this.tableData = val;
            },


    handles(row){
 console.log("row的ID--"+row.reid)
    this.$axios
        .get("http://localhost:8082/RepaymentRegistered/RepaymentReid", {
          params: {
            
            reid:row.reid
           
          }
        })
        .then(resp => {
         this.sizeForm=resp.data
         console.log(resp);
        });
    },
    submitForm(){
      
      console.log("---this.sizeForm.reid"+this.sizeForm.reid)

       console.log("---this.sizeForm.date1----"+this.sizeForm.date1+this.sizeForm.date2)
      var time=this.sizeForm.date2

        this.$axios
        .get("http://localhost:8082/RepaymentRegistered/Timer", {
          params: {
            reid:this.sizeForm.reid,
            date1:this.sizeForm.date1,
            date2:this.sizeForm.date2,
           money:this.sizeForm.age
          }
        })


    },
    handleClickssss(row){
        console.log("进入收费")
      this.$axios.get("http://localhost:8082/RepaymentRegistered/RepaymentRegisteredSelectall",{params:{
           reid:row.reid,
           pageIndex:this.currentPage4,
            pageSize: this.pageSize
      }}).then(resp=>{
      this.tableDatas = resp.data.data.beanList;
      this.totalRecords=resp.data.data.totalRecord;
      });
    console.log(row);
    },
     onSubmit() {
        console.log('submit!');
        this.$axios.get("http://localhost:8082/loanmanage/selcetByname", 
        {params: {
            enterprisename:this.formInline.enterprisename,
            code:this.formInline.code
        }}).then(resp=>{
           this.tableData=resp.data.data
          console.log(resp)
        })
      },
     handleSizeChange(val) {
       this.pageSize=val
        console.log(`每页 ${val} 条`);
         this.init();
      },
      handleSizeChanges(val){
        this.pageSizes=val
        console.log(`每页 ${val} 条`);
         this.inits();
      },
      handleCurrentChange(val) {
          this.currentPage=val
        console.log(`当前页: ${val}`);
        this.init();
      },
      handleCurrentChanges(val){
          this.currentPage5=val
        console.log(`当前页: ${val}`);
        this.inits();
      },
    handleClicks(row) {
      this.$router.push({path:'/repaymentregistered',query:{reid:row.reid}});
        console.log(row);
      },
    init(){
      this.$axios
        .get("http://localhost:8082/LoanLevelFive/LoanLevelFiveAll", {
          params: {
            
            pageIndex:this.currentPage4,
            pageSize: this.pageSize
          }
        })
        .then(resp => {
          this.tableData = resp.data.data.beanList;
          this.totalRecord=resp.data.data.totalRecord;
          console.log(resp)
        });
    },
    inits(){
      console.log()
     
     
    }
  }
}
</script>

<style >
.block{
 position: relative;
 left: 350px;
 top: 10px;


}
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 20%;
  }

</style>